<!-- 离职申请 -->
<template>
  <div>
    <div class="eda-main-title">
      <div class="top-icon">
        <img src="../../../assets/img/personnelImage/创建流程图.png"/>
      </div>
      <div class="top-title">
        流程:创建 - 辞职申请 - 创建
      </div>
      <div class="top-operate">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button type="primary" @click="this.$router.replace('/emp-abnormal/ar')">取消</el-button>
      </div>
    </div>
    <div class="eda-main">
      <div class="main-middle">
        <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
                 size="default" @submit.prevent>
          <div class="table-container">
            <table class="table-layout customer-table">
              <tbody>
              <tr>
                <td  colspan="3">
                  <div class="static-content-item">
                    <div>基本信息</div>
                  </div>
                </td>
              </tr>
              <tr style="background: rgb(248,249,250)">
                <td >
                  <div class="static-content-item">
                    <div>标题</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>提交日期</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>申请人</div>
                  </div>
                </td>
              </tr>
              <tr style="background: rgb(248,249,250)">
                <td>
                  <el-form-item label="" label-width="0" prop="lzbt" class="label-center-align">
                    <el-input v-model="lzbt" readonly="true" size="large" type="text" clearable>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="fillingDate" class="label-center-align">
                    <el-input v-model="formData.fillingDate" readonly="true" size="large" type="text" clearable>
                    </el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="sqr" class="label-center-align">
                    <el-input v-model="sqr" size="large"  @focus="dialogTableVisible = true" type="text" clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td >
                  <div class="static-content-item">
                    <div>申请人部门</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>入职时间</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>现任岗位</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="" label-width="0" prop="sqrbm" class="label-center-align">
                    <el-input
                        style="width: 300px;height: 40px;line-height: 40px;padding: 0"
                        v-model="sqrbm"
                        class="w-50 m-2"
                        type="text"
                        size="large"
                        readonly
                    />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="rzrq" class="label-center-align">
                    <el-input v-model="rzrq" size="large" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="xrgw" class="label-center-align">
                    <el-input v-model="xrgw" size="large" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td >
                  <div class="static-content-item">
                    <div>是否需要工作交接</div>
                  </div>
                </td>
                <td >
                  <div class="static-content-item">
                    <div>交接人</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="" label-width="0" prop="needHandOver" class="label-center-align">
                    <el-select v-model="formData.needHandOver" class="m-2" size="large">
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="successorName" class="label-center-align">
                    <el-input v-model="successorName" size="large"  @focus="ifEmpTure" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="3"></td>
              </tr>
              <tr>
                <td  colspan="3">
                  <div class="static-content-item">
                    <div>离职原因</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <el-form-item label="离职原因" prop="cause" class="required label-center-align">
                    <el-input type="textarea" v-model="formData.cause" size="large" rows="3"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <el-form-item label="建议和意见" prop="opinion" class="label-center-align">
                    <el-input type="textarea" v-model="formData.opinion" size="large" rows="3"></el-input>
                  </el-form-item>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-form>

      </div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" title="员工">
    <el-table :data="gridData" @row-click="byval">
      <el-table-column property="id" label="编号" width="200" />
      <el-table-column property="empName" label="姓名" width="auto"/>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :total="paging.total"
        :page-size="paging.pageSize"
        :hide-on-single-page="hidePaging"
    />
  </el-dialog>
  <el-dialog v-model="empselVisible" title="交接人员">
    <el-table :data="gridData" @row-click="empselbyval">
      <el-table-column property="id" label="编号" width="200" />
      <el-table-column property="empName" label="姓名" width="auto"/>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :total="paging.total"
        :page-size="paging.pageSize"
        :hide-on-single-page="hidePaging"
    />
  </el-dialog>
</template>

<script>
import {getEmpPageInfo} from "../../../network/emp";
import {add, selAll} from "../../../network/per/emplHandling";
export default {
  data() {
    return {
      paging:{
        total: 100,//记录总数
        pageSize: 9,//每页记录数
        pageNum: 1,//当前页码
        pagerCount: 8,//最大页码按钮数，限定在(5 ≤ x ≤ 21 的奇数)
      },
      hidePaging: false,
      gridData: [],
      dialogTableVisible: false,
      empselVisible: false,
      restaurants: [],
      formData: {
        empId:null,
        deptId:null,
        fillingDate:'',
        cause: "",
        opinion: "",
        needHandOver:0,
        successorId:null,
      },
      lzbt: "",
      sqr: "",
      sqrbm: "",
      rzrq: null,
      xrgw: "",
      successorName:'',
      options:[
        {
          value: 0,
          label: '有',
        },
        {
          value: 1,
          label: '无',
        }
      ],
      rules: {
        cause: [{
          required: true,
          message: '字段值不可为空',
        }],
      },
    }
  },
  mounted() {
    getEmpPageInfo(
        {
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize
        }
  ).then((das)=>{
      console.log("das ",das)
      this.gridData = das.list
      this.paging.total = das.total;
      this.paging.pageNum = das.pageNum
      this.paging.pageSize =  das.pageSize
    });
    this.formData.fillingDate = this.getCurrentTime()
  },
  methods: {
    ifEmpTure(){
      if (this.formData.needHandOver == 0){
        this.empselVisible = true
      }
      return
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      getEmpPageInfo(
          {
            pageNum: val,
            pageSize: this.paging.pageSize
          }
      ).then((das)=>{
        console.log("das ",das)
        this.gridData = das.list
        this.paging.total = das.total;
        this.paging.pageNum = das.pageNum
        this.paging.pageSize =  das.pageSize
      });
      this.formData.fillingDate = this.getCurrentTime()
    },
    getCurrentTime() {
      //获取当前时间并打印
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      // let hh = new Date().getHours();
      // let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      // let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      // +' '+hh+':'+mf+':'+ss
      let time = yy+'-'+mm+'-'+dd;
      return time;
    },
    empselbyval(row){
      this.formData.successorId = row.id;
      this.successorName = row.empName;
    },
    byval(row){
      this.formData.empId = row.id;
      this.formData.deptId = row.dept.id;

      this.rzrq = row.hireDate;
      this.xrgw = row.position.name
      this.sqrbm = row.dept.deptName;
      this.sqr = row.empName;
      this.lzbt = row.empName + " - 离职申请"

    },
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid){
          this.$notify({
            title: '警告',
            message: '离职原因未填写！',
            type: 'error'
          })
          return
        }
        //TODO: 提交表单
        if (this.formData.empId===null){
          this.$message('请至少选择一位辞退员工！');
          return;
        }
        add(this.formData).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
            this.$router.replace('/emp-abnormal/ar')
          }else{
            this.$notify({
              title: '失败',
              message: '这是一条失败的提示消息',
              type: 'error'
            })
          }
        })
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/EDemandApp";
</style>